{% extends "timeline/base.html" %}
{% load compress %}

{% block title %}
  {% if tl %}
    编辑事件 {{tl}}
  {% endif %}
{% endblock %}

{% block extra_header %}
{{block.super}}
<style type="text/css">
  .content hr {
    margin: 5px 0;
  }
  textarea {
    height: 120px;
  }
  #id_media, #id_media_caption {
    height: 20px;
  }
  #tl_form_div {
    display: none;
  }
  #tl_list .btn_add_event {
    float: right;
  }
  .event.cover {
    font-weight: bold;
  }
  #fileupload .uimg img {
  }
  table.tllist .tldate {
    white-space:nowrap;
  }
  table.tllist img {
    max-width: 244px;
  }
  #id_tl_imgs .thumbnails {
    margin-left: 0;
    margin-right: 18px;
  }
  #id_tl_imgs .thumbnails > li {
    margin-left: 18px;
  }
  #id_tl_imgs ul li {
    width: 88px;
    height: 88px;
  }
  #id_tl_imgs ul li img {
    max-width: 80px;
    max-height: 80px;
  }
  #fileupload {
    margin: 0;
  }
  #fileupload p {
    padding-bottom: 10px;
  }
</style>
{% endblock %}

{% block sidebar %}
{% endblock %}

{% block container_top %}
<div id="container_top">
  <div class="sw">
    <a href="{% url timeline_edit tl.pk %}">编辑基础信息</a>
    <span>|</span>
    <a href="{% url timeline_attachs tl.pk %}">图片管理</a>
    <span>|</span>
    <a href="###" class="btn_add_event">添加事件</a>
  </div>
  <ul class="sbreadcrumb">
    <li><a href="{% url idx %}">首页</a> <span class="divider">/</span></li>
    <li><a href="{% url timeline_detail tl.pk %}">{{ tl.title }}</a> <span class="divider">/</span></li>
    <li class="active">编辑事件</li>
  </ul>
</div>
{% endblock %}

{% block content %}
  <div class="">
    <div class="">
      <div id="tl_list">
        <table class="table table-striped tllist" style="width=100%">
          <thead>
            <tr>
              <th style="width: 40px"></th>
              <th style="width: 80px">日期</th>
              <th style="width: 180px">标题</th>
              <th style="">说明</th>
              <th style="width: 260px;">媒体</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
        <a href="###" class="btn btn-primary btn_add_event">添加</a>
      </div>
    </div>

    <div class="" id="tl_form_div">
      <div style="width: 640px;float:left;">
        <form action="{% url timeline_addevent_ tl.pk %}" id="tl_form" enctype="multipart/form-data" method="post" class="form-horizontal">
          <fieldset>
            {% csrf_token %}
            <input type="hidden" id="id_pk_" />
            {{form.as_div}}
            <div class="form-actions" class="form-horizontal">
              <p>
                <button type="submit" class="btn btn-primary" id="id_btn_save">保存</button>
                <button type="submit" class="btn" id="id_btn_save_more">保存并继续添加</button>
                <button type="button" id="btn_tlf_cancel" class="btn cancel">取消</button>
              </p>
            </div>
          </fieldset>
        </form>
      </div>
      <div>
      </div>
    </div>
  </div>

  <div id="show_tl_img" class="simple popover fade bottom in">
    <div class="arrow"> </div>
    <div class="popover-inner">
      <div class="popover-tab" >
        <a class="close" href="###" onclick="$('#show_tl_img').hide()">×</a>
        <p>
          <a href="###" class="current">媒体文件</a>
        </p>
      </div>
      <div class="popover-content">
      </div>
    </div>
  </div>

  <div id="insert_tl_img" class="simple popover fade bottom in">
    <div class="arrow"> </div>
    <div class="popover-inner">
      <div class="popover-tab" >
        <a class="close" href="###" onclick="$('#insert_tl_img').hide()">×</a>
        <p id="insert_tl_img_tab">
          <a href="#id_upload_img" class="current">本地上传</a>
          <a href="#id_tl_imgs" id="tab_upload_img">已上传图片</a>
        </p>
      </div>
      <div class="popover-content">
        <div id="id_upload_img"> 
          <form id="fileupload" action="" method="POST" enctype="multipart/form-data">
            <div class="fileupload-buttonbar">
              <div class="upload">
                <span class="btn fileinput-button">
                  <i class="icon-upload"></i>
                  <span>上传图片</span>
                  <input type="file" name="file">
                </span>
                &nbsp; <br/> &nbsp;
              </div>
              <div class="uploadding" style="display: none">
                <p>
                  <img src="{{STATIC_URL}}img/loading.gif" />
                  文件上传中，请稍后...
                </p>
                <button type="reset" class="btn cancel">
                  <i class="icon-ban-circle"></i>
                  <span>取消上传</span>
                </button>
              </div>
              <div class="uimg" style="display: none">
                <p> </p>
                <button type="reset" class="btn delete">
                  <i class="icon-remove"></i>
                  <span>删除图片</span>
                </button>
              </div>
            </div>
          </form>
        </div>
        <div id="id_tl_imgs" style="max-width: 560px; display: none">
          <ul class="thumbnails">
          </ul>
          <button type="reset" class="btn refresh" style="margin-left: 18px;">
            <i class="icon-refresh"></i>
            <span>刷新</span>
          </button>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block footer_ext %}
  {{ block.super }}
  <script type="text/html" id="events_row_tmpl">
    <tr class="event <% if (cover) { %>cover<% } %>" id="e_<%=pk%>">
      <td>
        <a href="###" class="del">
          <i class="icon-remove"></i>
        </a>
        <a href="###" class="edit">
          <i class="icon-pencil"></i>
        </a>
      </td>
      <td class="tldate">
        <%=startdate%> 
        <% if (enddate != '') { %> ~ <%=enddate%> <% } %>
      </td>
      <td>
        <%=title%>
        <i class="icon-<%=mediaType%>"></i>
      </td>
      <td><%=_text%></td>
      <td><%=media%></td>
    </tr>
  </script>
  <link rel="stylesheet" href="{{ STATIC_URL }}jQuery-File-Upload/css/jquery.fileupload-ui.css" type="text/css"/>
	{% compress js %}
  <script src='{{STATIC_URL}}js/simple-tpl.js' type='text/javascript'></script>
	{% endcompress %}
	{% compress js %}
  <script type="text/javascript" src="{{ STATIC_URL }}ajax_validation/js/jquery-bootstrap-form.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}ajax_validation/js/jquery.djangoajaxform.js"></script>
	{% endcompress %}
  <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.autosize-min.js"></script>

	{% compress js %}
  <script src="{{ STATIC_URL }}jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
  <script src="{{ STATIC_URL }}jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
  <script src="{{ STATIC_URL }}jQuery-File-Upload/js/jquery.fileupload.js"></script>
  <script src="{{ STATIC_URL }}jQuery-File-Upload/js/jquery.fileupload-fp.js"></script>
  <script src="{{ STATIC_URL }}jQuery-File-Upload/js/jquery.fileupload-ui.js"></script>
  <script src="{{ STATIC_URL }}jQuery-File-Upload/js/locale.js"></script>
	{% endcompress %}
  <script type="text/javascript">
    var url_event_delete_ = "{% url event_delete_ %}";
    var url_event_edit_ = "{% url event_edit_ %}";
    var url_event_json_ = "{% url event_json_ %}";
    var url_timeline_addevent_ = "{% url timeline_addevent_ tl.pk %}";
    var url_timeline_events_sjson_ = "{% url timeline_events_sjson_ tl.pk %}";
    var url_timeline_attachs_ = '{% url timeline_attachs_ tl.pk %}';
    var url_timeline_attach_delete_ = '{% url timeline_attach_delete_ tl.pk %}';
    var url_timeline_attach_upload_ = "{% url timeline_attach_upload_ tl.pk %}";
  </script>
	{% compress js %}
  <script src="{{ STATIC_URL }}js/events.js"></script>
	{% endcompress %}
{% endblock %}
